import { Button, Result } from 'antd';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';

import styles from './index.module.scss';

const NotFound = () => {
  const { t } = useTranslation();
  const navigate = useNavigate();

  return (
    <div className={styles.notFound}>
      <Result
        className={styles.result}
        status="404"
        title={t('notFound')}
        subTitle={t('notFoundSub')}
        extra={
          <Button type="primary" onClick={() => navigate('/')}>
            {t('backHome')}
          </Button>
        }
      />
    </div>
  );
};

export default NotFound;
